<template>
  <section class="todoapp">
    <TodoHeader
    @addTask="addTask"
   
    ></TodoHeader>
    <TodoMain
    :list="showList"
    @isCheck="isCheck"
    @delHandler="delHandler"
    @isDone="isDone"
    >
  
  </TodoMain>
    <TodoFooter
    :list="showList"
    @clear="clear"
    @isSelected="isSelected"
    ></TodoFooter>
  </section>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue';
import TodoMain from './components/TodoMain.vue';
import TodoFooter from './components/TodoFooter.vue';
export default {
    components: { TodoHeader, TodoMain, TodoFooter },
    data() {
      return {
        list: [
        { id: 1, name: "吃饭", isDone: true },
        { id: 2, name: "睡觉", isDone: false },
        { id: 3, name: "打豆豆", isDone: true },
      ],
      type:'all'
      }
    },
    methods: {
      isCheck(id) {
        const obj =this.list.find(item => item.id===id)
        obj.isDone =!obj.isDone
      },
      delHandler(id) {
        const index =this.list.findIndex(item => item.id === id)
        this.list.splice(index,1)
      },
      addTask(inputTag) {
        this.list.push({
          id:Date.now(),
          name:inputTag,
          isDone:false
        })
      },
      clear() {
       this.list = this.list.filter(item => !item.isDone)
      },
      isSelected(type) {
        console.log(type);
          this.type=type
      },
      isDone(val) {
        this.list.forEach(item => item.isDone = val)
      }
    },
    computed: {
      showList() {
        if(this.type === 'all') {
          return this.list
        }else if(this.type === 'active') {
          return this.list.filter(item => !item.isDone)
        }else {
          return this.list.filter(item => item.isDone)
         
        }
      }
    },
}
</script>

<style></style>
